<template>
  <div >
    <div class="background">
<!--      <img :src="imgSrc" class="imgSrc"/>-->
    </div>
    <div class="front">
      <div class="loginContainer">
        <el-form ref="loginForm" :rules="rules"
                 v-loading="loading"
                 element-loading-text="正在登录..."
                 element-loading-spinner="el-icon-loading"
                 element-loading-background="rgba(0, 0, 0, 0.8)"
                 :model="loginForm">
          <h3 class="loginTitle">系统登录</h3>
          <el-form-item prop="username">
            <el-input type="text" auto-complete="false"  v-model="loginForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击更换验证图片"
                      style="width: 250px;margin-right: 5px"></el-input>
            <img  :src="captchaUrl" @click="updateCaptcha">
          </el-form-item>
          <el-checkbox v-model="checked" class="loginRemeber">记住我</el-checkbox>
          <el-button type="primary" @click="submitLogin" style="width: 100%">登录</el-button>
        </el-form>
      </div>
    </div>
  </div>

</template>

<script>
import login from '@/api/login'
import {baseUrl} from '@/http/request'
import {initMenu} from "../../utils/menu";
import store from "../../store";
import LoginApi from "../../api/login";
import router from "../../router";
export default {
  name: "Login",
  data(){
    return{
      // imgSrc: require('../assets/hyy2.jpg'),
      captchaUrl: baseUrl + 'captcha?time=' + new Date(), // 加time确保接口刷新能够识别是重新调用
      loading:false,
      loginForm:{
        username:'admin',
        password:'123',
        code:''
      },
      checked:true,
      rules:{
        'username':[{ required:true, message:'请输入用户名', trigger:'blur'}],
        'password':[{ required:true, message:'请输入密码', trigger:'blur'}],
        'code':[{ required:true, message:'请输入验证码', trigger:'blur'}],
      }
    }
  },
  methods:{
    submitLogin(){
      this.$refs.loginForm.validate((valid) => {
        if (valid) {

          this.loading = true
          console.log(this.loginForm);
          login.userLogin(this.loginForm).then(res =>{
            console.log(res);
            if (res){
              console.log("登录成功咯");
              this.loading = false
              // 存储用户token
              const token = res.data.obj.tokenHead + res.data.obj.token;
              window.sessionStorage.setItem('token',token)

              // 初始化菜单栏
              initMenu(router, store);
              // 获取用户数据
              login.getAdminInfo().then((res) => {
                console.log("用户信息111111111");
                console.log(res.data.userFace);
                if (res) {
                  console.log("存储用户数据中111111111");
                  // 存入用户信息
                  window.sessionStorage.setItem('userInfo',JSON.stringify(res.data));
                  console.log(window.sessionStorage.getItem('userInfo'))
                  let path = this.$route.query.redirect;
                  this.$router.replace((path === '/' || path === undefined)?'/home':path);
                  // this.$router.push('/home')
                }
              }).catch(err => {
                console.log(err);
              })
            }else{
              this.loading = false
              console.log('111')
            }
          }).catch(error => {
            console.log(error);
          })
          // this.$message.success("请求成功")
        } else {
          this.$message.error("请输入所有字段")
          return false;
        }
      });
    },

    updateCaptcha(){
      this.captchaUrl= baseUrl + 'captcha?time='+new Date() // 加time确保接口刷新能够识别是重新调用
    }
  }
}
</script>

<style>


.background {
  width: 100%;
  height: 100%;
  /**宽高100%是为了图片铺满屏幕 */
  z-index: -1;
  position: absolute;
}

.imgSrc {
  height: 100%;
  width: 100%;
}

.front {
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;

}

.loginContainer{
  border-radius: 15px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 15px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow:  0 0 25px #cac6c6;
}
.loginTitle{
  margin: 10px auto 40px auto;
  text-align: center;

}
.loginRemeber{
  text-align: left;
  margin: 0 0 15px 0;
}


.el-form-item__content{
  display: flex;
  align-items: center;
}


</style>
